<template>
  <view class="points-container">
    <!-- 顶部积分信息 -->
    <view class="points-header">
      <view class="points-info">
        <text class="points-title">我的积分</text>
        <text class="points-num">{{ totalPoints }}</text>
      </view>
      <view class="points-detail" @click="goToPointsDetail">
        <view class="detail-content">
          <text class="detail-desc">查看积分明细</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>

    <!-- 兑换商品列表 -->
    <scroll-view 
      class="products-list" 
      scroll-y 
      @scrolltolower="loadMore"
      :refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="products-grid">
        <view class="product-item" v-for="item in displayProducts" :key="item.id">
          <image class="product-image" :src="item.image" mode="aspectFill"></image>
          <view class="product-info">
            <text class="product-name">{{ item.name }}</text>
            <text class="product-desc">{{ item.description }}</text>
            <view class="exchange-info">
              <view class="price-info">
                <view class="points-money-group">
                  <view class="points-wrap">
                    <text class="points-required">{{ item.points }}</text>
                    <text class="points-text">积分</text>
                  </view>
                  <text class="plus-symbol">+</text>
                  <text class="money-required">¥{{ item.money }}</text>
                </view>
                <text class="original-price">价值¥{{item.originalPrice}}</text>
              </view>
              <button class="exchange-btn" @click="exchange(item)">兑换</button>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="hasMore">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-else>
        <text>没有更多商品了</text>
      </view>
    </scroll-view>

      <!-- 使用登录组件 -->
      <login-modal
        ref="loginModal"
        :show="showLoginModal"
        @login-success="onLoginSuccess"
      />
  </view>
</template>

<script>
import config from '@/config/config.js'
import LoginModal from '@/components/login-modal/index.vue'

export default {
  components: {
    'login-modal': LoginModal
  },
  
  data() {
    return {
      showLoginModal: false,
      totalPoints: 0,
      displayProducts: [], // 显示的商品列表
      pageNum: 1,         // 当前页码
      pageSize: 10,       // 每页数量
      hasMore: true,      // 是否还有更多
      isRefreshing: false,
      isLoading: false,
      total: 0           // 总记录数
    }
  },
  
  onLoad() {
    this.loadProducts()
  },
  
  methods: {
    // 加载商品数据
    async loadProducts(isLoadMore = false) {
      if (!isLoadMore) {
        this.pageNum = 1
        this.displayProducts = []
      }

      try {
        const res = await this.$http.post(config.api.product.integralShopInit, {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        
        if (res.data.code === 200) {
          this.totalPoints=res.data.data.integral
          const integralList = res.data.data.integralList
          this.total = res.data.data.integralList.length
          // 处理商品数据
          const products = integralList.map(item => ({
            id: item.id,
            name: item.integralProName || '商品',
            description: item.description || '暂无描述',
            points: item.integralProIntegral || 0,
            money: item.integralProMoney || 0,
            originalPrice: item.integralProOldMoney || 0,
            image: item.integralProImg || '/static/images/index_page.png'
          }))

          // 追加或替换数据
          if (isLoadMore) {
            this.displayProducts = [...this.displayProducts, ...products]
          } else {
            this.displayProducts = products
          }

          // 判断是否还有更多数据
          this.hasMore = this.displayProducts.length < this.total

        } else if (res.data.code === 400) {
          // 需要登录，显示登录弹框
          this.showLoginModal = true
          this.$refs.loginModal.startLogin()
        } else {
          throw new Error(res.data.message || '获取商品列表失败')
        }
      } catch (err) {
        console.error('获取商品列表失败:', err)
        uni.showToast({
          title: '获取商品列表失败',
          icon: 'none'
        })
      }
    },
    
    // 登录成功回调
    async onLoginSuccess(userInfo) {
      this.showLoginModal = false
      // 更新积分值
      this.totalPoints = userInfo.integral || 0
      // 重新加载数据
      await this.loadProducts()
    },
    
    // 下拉刷新
    async onRefresh() {
      if (this.isRefreshing) return
      this.isRefreshing = true
      try {
        await this.loadProducts()
      } finally {
        this.isRefreshing = false
      }
    },
    
    // 加载更多
    async loadMore() {
      if (!this.hasMore || this.isLoading) return
      
      this.isLoading = true
      try {
        this.pageNum++
        await this.loadProducts(true)
      } finally {
        this.isLoading = false
      }
    },
    
    // 其他方法保持不变
    goToPointsDetail() {
      uni.navigateTo({
        url: '/subpages/pointsDetail/pointsDetail'
      })
    },
    
    exchange(item) {
      if(this.totalPoints < item.points) {
        uni.showToast({
          title: '积分不足',
          icon: 'none'
        })
        return
      }
      uni.showModal({
        title: '确认兑换',
        content: `确定使用${item.points}积分+${item.money}元兑换该商品吗？`,
        success: (res) => {
          if(res.confirm) {
            uni.showToast({
              title: '兑换成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script> 
<style>
.points-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-top: calc(120rpx + var(--status-bar-height));
}

.points-header {
  background: linear-gradient(135deg, #000000, #333333);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: calc(120rpx + var(--status-bar-height));
  box-sizing: border-box;
}

.points-info {
  display: flex;
  flex-direction: column;
  padding-top: var(--status-bar-height);
  margin-bottom: 0;
}

.points-title {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 4rpx;
}

.points-num {
  font-size: 48rpx;
  color: #ffffff;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.points-detail {
  padding-top: var(--status-bar-height);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  padding: 12rpx 20rpx;
  border-radius: 30rpx;
  backdrop-filter: blur(10px);
}

.detail-content {
  margin-right: 8rpx;
}

.detail-desc {
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.9);
}

.arrow {
  color: rgba(255, 255, 255, 0.9);
  font-size: 24rpx;
}

.products-list {
  flex: 1;
  height: calc(100vh - 120rpx - var(--status-bar-height));
}

.products-grid {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
  transition: transform 0.2s;
  width: 100%;
}

.product-item:active {
  transform: scale(0.98);
}

.product-image {
  width: 100%;
  height: 240rpx;
  position: relative;
}

.product-info {
  padding: 16rpx;
}

.product-name {
  font-size: 26rpx;
  line-height: 1.4;
  margin-bottom: 6rpx;
}

.product-desc {
  font-size: 22rpx;
  line-height: 1.4;
}

.exchange-info {
  margin-top: 12rpx;
  padding-top: 12rpx;
}

.price-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.points-money-group {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.points-wrap {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
  background: rgba(255, 107, 107, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.points-required {
  font-size: 28rpx;
}

.points-text {
  font-size: 20rpx;
}

.plus-symbol {
  color: #999;
  font-size: 24rpx;
  margin: 0 8rpx;
}

.money-required {
  font-size: 28rpx;
}

.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}

.exchange-btn {
  background: linear-gradient(135deg, #000000, #333333);
  color: #ffffff;
  font-size: 22rpx;
  padding: 8rpx 24rpx;
  border-radius: 30rpx;
  border: none;
  line-height: 1.4;
  min-width: 100rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.exchange-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  opacity: 0.9;
}

.loading-more,
.no-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-more::after {
  content: '';
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
  border: 2rpx solid #999;
  border-top-color: transparent;
  border-radius: 50%;
  animation: loading 0.8s infinite linear;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
